import { BrowserRouter, Routes, Route, useLocation } from 'react-router-dom';
import { useEffect } from 'react';
import { LanguageProvider, useLanguage } from './contexts/LanguageContext';
import { ThemeProvider } from './contexts/ThemeContext';
import { CartProvider } from './contexts/CartContext';
import Layout from './components/Layout';
import Home from './pages/Home';
import Products from './pages/Products';
import Pricing from './pages/Pricing';
import DynamicResidentialIPv6 from './pages/pricing/DynamicResidentialIPv6';
import StaticResidentialIPv6 from './pages/pricing/StaticResidentialIPv6';
import DatacenterIPv6 from './pages/pricing/DatacenterIPv6';
import PurchaseDynamicResidential from './pages/pricing/PurchaseDynamicResidential';
import PurchaseStaticResidential from './pages/pricing/PurchaseStaticResidential';
import PurchaseDatacenterIPv6 from './pages/pricing/PurchaseDatacenterIPv6';
import Cart from './pages/cart/Cart';
import Orders from './pages/Orders';
import Documentation from './pages/Documentation';
import Support from './pages/Support';
import Blog from './pages/Blog';
import BlogPost from './pages/BlogPost';
import About from './pages/About';
import TermsOfService from './pages/TermsOfService';
import PrivacyPolicy from './pages/PrivacyPolicy';
import CookieBanner from './components/CookieBanner';

// Component to sync language with URL
function LanguageSync() {
  const location = useLocation();
  const { language, setLanguage } = useLanguage();

  useEffect(() => {
    const isZhPath = location.pathname.startsWith('/zh-CN');
    const currentLang = isZhPath ? 'zh-CN' : 'en';

    // Sync language context with URL
    if (currentLang !== language) {
      setLanguage(currentLang);
    }
  }, [location.pathname, language, setLanguage]);

  return null;
}

function AppRoutes() {
  return (
    <>
      <Routes>
        {/* English routes (default) */}
        <Route path="/" element={<Layout />}>
          <Route index element={<Home />} />
          <Route path="products" element={<Products />} />
          <Route path="pricing" element={<Pricing />} />
          <Route path="pricing/dynamic-residential-ipv6" element={<DynamicResidentialIPv6 />} />
          <Route path="pricing/static-residential-ipv6" element={<StaticResidentialIPv6 />} />
          <Route path="pricing/datacenter-ipv6" element={<DatacenterIPv6 />} />
          <Route path="pricing/purchase-dynamic-residential" element={<PurchaseDynamicResidential />} />
          <Route path="pricing/purchase-static-residential" element={<PurchaseStaticResidential />} />
          <Route path="pricing/purchase-datacenter" element={<PurchaseDatacenterIPv6 />} />
          <Route path="cart" element={<Cart />} />
          <Route path="orders" element={<Orders />} />
          <Route path="documentation" element={<Documentation />} />
          <Route path="blog" element={<Blog />} />
          <Route path="blog/:slug" element={<BlogPost />} />
          <Route path="support" element={<Support />} />
          <Route path="about" element={<About />} />
          <Route path="terms-of-service" element={<TermsOfService />} />
          <Route path="privacy-policy" element={<PrivacyPolicy />} />
        </Route>

        {/* Chinese routes with /zh-CN prefix */}
        <Route path="/zh-CN" element={<Layout />}>
          <Route index element={<Home />} />
          <Route path="products" element={<Products />} />
          <Route path="pricing" element={<Pricing />} />
          <Route path="pricing/dynamic-residential-ipv6" element={<DynamicResidentialIPv6 />} />
          <Route path="pricing/static-residential-ipv6" element={<StaticResidentialIPv6 />} />
          <Route path="pricing/datacenter-ipv6" element={<DatacenterIPv6 />} />
          <Route path="pricing/purchase-dynamic-residential" element={<PurchaseDynamicResidential />} />
          <Route path="pricing/purchase-static-residential" element={<PurchaseStaticResidential />} />
          <Route path="pricing/purchase-datacenter" element={<PurchaseDatacenterIPv6 />} />
          <Route path="cart" element={<Cart />} />
          <Route path="orders" element={<Orders />} />
          <Route path="documentation" element={<Documentation />} />
          <Route path="blog" element={<Blog />} />
          <Route path="blog/:slug" element={<BlogPost />} />
          <Route path="support" element={<Support />} />
          <Route path="about" element={<About />} />
          <Route path="terms-of-service" element={<TermsOfService />} />
          <Route path="privacy-policy" element={<PrivacyPolicy />} />
        </Route>
      </Routes>
      <CookieBanner />
    </>
  );
}

export function App() {
  return (
    <BrowserRouter
      future={{
        v7_startTransition: true,
        v7_relativeSplatPath: true,
      }}
    >
      <ThemeProvider>
        <LanguageProvider>
          <CartProvider>
            <LanguageSync />
            <AppRoutes />
          </CartProvider>
        </LanguageProvider>
      </ThemeProvider>
    </BrowserRouter>
  );
}